<template>
  <div class="reporthead">
    <div class="head-row">
      <span>所属企业：</span>
      <Cascader
        :value.sync="company_id_arr"
        :options.sync="options"
        :width="'300px'"
        :isClearable="false"
        :changeEvent="'mallChange'"
      ></Cascader>
    </div>
    <div class="head-row">
      <span>日期选择：</span>
      <div class="datecheck">
        <el-date-picker
          v-model="datetimeval.day"
          type="daterange"
          align="right"
          popper-class="comp-date"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          :picker-options="pickerOptions"
          @change="dayChange">
        </el-date-picker>
      </div>
    </div>
    <div class="head-row site-row">
      <span>位置：</span>
      <div class="site">
        <el-select v-model="submitCase" @change="CaseChange" @visible-change="CaseVisibleChange" @remove-tag="CaseClick" filterable
                   :multiple-limit="caseLimint" multiple size="small" clearable placeholder="请选择位置" style="width:80%;">
          <el-option
            v-for="item in Case"
            :key="item.id"
            :label="item.case_name"
            :value="item.id">
          </el-option>
        </el-select>
      </div>
    </div>

    <!--<div style="display: inline-block;padding: 10px 50px;border: 1px solid #333">-->
      <!--<el-badge value="max" type="warning">-->
        <!--<span style="padding: 5px 30px">12312</span>-->
      <!--</el-badge>-->
    <!--</div>-->
    <!--<div class="head-row show">-->
      <!--<span>显示：</span>-->
      <!--<template>-->
        <!--<el-radio-group v-model="sum_or_part" @change="Upsum_or_part">-->
          <!--<el-radio-button :disabled="showDisabled.sum" label="sum">合计</el-radio-button>-->
          <!--<el-radio-button :disabled="showDisabled.part"  label="part">分项</el-radio-button>-->
        <!--</el-radio-group>-->
      <!--</template>-->
      <!--<el-button type="warning" icon="el-icon-refresh-left" class="reload" @click="reload" style="background:#ffc02e;border-color:#ffc02e;" ></el-button>-->
    <!--</div>-->
  </div>
</template>
<style lang="scss">
  .reporthead {
    width: 100%;
    background: #fff;
    padding: 27px 0 20px 45px;
    .head-row {
      line-height: 36px;
      height: 36px;
      margin-bottom: 15px;
      .block{
        color: #777;
        span{
          margin-right: 2px;
        }
      }
      > span {
        display: inline-block;
        width: 70px;
        margin-right: 30px;
      }
      span {
        font-size: 14px;
        color: #777;
      }
      .datecheck {
        .el-input__inner {
          line-height: 36px;
          height: 36px;
          font-size: 14px;
          border-radius: 0;
          width: 250px;
          border-color: #e3eaf4;
          .el-input__icon {
            height: 36px;
            line-height: 36px;
            &.el-range__close-icon {
              display: none;
            }
          }
          .el-range-separator {
            height: 36px;
            line-height: 36px;
            padding: 0;
          }
        }
        height: 36px;
        display: inline-block;
        .el-date-editor--date {
          .el-input__inner {
            border-radius: 0;
            border-color: #e3eaf4;
            height: 36px;
            line-height: 36px;
          }
          span,
          i {
            line-height: 36px;
          }
        }
        .timefast{
          width: 120px;
          .el-input__inner {
            padding: 0 20px;
            font-size: 14px;
            margin-left: -6px;
          }
        }
        .el-input--suffix {
          width: 120px;
          .el-input__inner {
            padding-right: 0;
            width: 120px;
          }
          .el-input__prefix {
            .el-input__icon {
              line-height: 36px;
              height: 36px;
            }
          }
          .el-input__suffix {
            line-height: 45px;
            vertical-align: middle;
            .el-input__suffix-inner{
              .el-icon-arrow-up.is-reverse{
                margin-top: -2px;
                display: block;
              }
            }
          }
        }
      }
      &.site-row {
        margin-bottom: 3px;
        position: relative;
        height: auto;
        > span {
          vertical-align: top;
        }
        .xiala {
          position: absolute;
          right: 20px;
          width: 80px;
          height: 36px;
          .iconfont {
            position: absolute;
            height: 36px;
            line-height: 38px;
            right: 10px;
          }
          .el-checkbox {
            width: 80px;
            height: 36px;
            line-height: 36px;
            padding: 0 10px 0 0;
            color: #000;
            .el-checkbox__input {
              display: none;
            }
            .el-checkbox__label {
              line-height: 36px;
              color: #000;
              padding: 0;
            }
          }

          border-radius: 2px;

          top: 0;
          text-align: center;
        }
        .site,
        .reheadselect {
          display: inline-block;
          width: 60%;
          transition: all 0.5s;
          overflow: hidden;
          &.siteopen{
            overflow-y:auto;
            &::-webkit-scrollbar {/*滚动条整体样式*/
              width: 5px;     /*高宽分别对应横竖滚动条的尺寸*/
              height: 5px;
              border-radius: 5px;
              scrollbar-arrow-color:red;
            }
            &::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
              border-radius: 5px;
              box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
              background: rgba(0,0,0,0.2);
              scrollbar-arrow-color:red;
            }
            &::-webkit-scrollbar-track {/*滚动条里面轨道*/
              box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
              background: rgba(0,0,0,0.1);
              border-radius: 5px;
            }
          }
          /*.el-checkbox,.el-radio {*/
          /*width: 182px;*/
          /*margin: 0 10px 15px 0;*/
          /*padding: 0;*/
          /*height: 36px;*/
          /*line-height: 36px;*/
          /*padding: 0;*/
          /*border-radius: 2px;*/
          /*text-align: center;*/
          /*border-color: #e3eaf4;*/
          /*&.is-checked {*/
          /*border-color: #5580ff;*/
          /*background: #5580ff;*/
          /*.el-checkbox__label ,.el-radio__label{*/
          /*color: #fff;*/
          /*}*/
          /*}*/

          /*&:hover {*/
          /*border-color: #5580ff;*/
          /*}*/
          /*.el-checkbox__input,.el-radio__input {*/
          /*display: none;*/
          /*}*/
          /*.el-checkbox__label,.el-radio__label {*/
          /*padding-left: 0;*/
          /*color: #000;*/
          /*}*/
          /*}*/
        }
      }
      &.show {
        > span {
          vertical-align: bottom;
        }
        height: 24px;
        line-height: 24px;
        .el-radio-group {
          height: 24px;
          line-height: 24px;
          .el-radio-button__inner {
            height: 24px;
            line-height: 22px;
            padding: 0;
            width: 50px;
            font-size: 12px;
          }
        }
        .reload {
          width: 26px;
          line-height: 24px;
          height: 24px;
          vertical-align: middle;
          padding: 0;
          display: inline-block;
        }
      }
    }
  }
  .comp-date.el-picker-panel{
    left: 215px !important;
    .el-picker-panel__sidebar {
      right: 0;
      width: 180px;
      text-align: center;
      &::before {
        content: "快速选择";
        width: 90%;
        height: 32px;
        margin: 8px 0;
        display: inline-block;
        font-size: 14px;
        line-height: 32px;
        border-radius: 3px;
        color: #fff;
        background: #6689f1;
        text-align: center;
      }
      .el-picker-panel__shortcut {
        text-align: center;
        display: inline-block;
        background: #f3f3f3;
        padding: 0;
        width: 40%;
        margin: 5px;
        &:hover {
          background: #5580ff;
          color: #fff;
        }
      }
    }
    .el-picker-panel__body {
      margin: 0 180px 0 0;
    }
  }
</style>
<script>
  let moment = require("moment");
  import Cascader from "@/components/sys/assembly/elcascader"; //级联选择器
  export default {
    props: {

    },
    data() {
      return {
        datetimeval:{
          day:[moment(new Date()).format("YYYY-MM-DD"),moment(new Date()).format("YYYY-MM-DD")],
        },
        pickerOptions: {                //时间日期控件规则
          disabledDate(time) {
            return time.getTime() > Date.now() - 8.64e6;
          },
          shortcuts: [
            {
              text: "今天",
              onClick(picker) {
                const start = moment().format("YYYY-MM-DD");
                const end = moment().format("YYYY-MM-DD");
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "昨天",
              onClick(picker) {
                const start = moment()
                .subtract(1, "days")
                .format("YYYY-MM-DD");
                const end = moment()
                .subtract(1, "days")
                .format("YYYY-MM-DD");
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "前天",
              onClick(picker) {
                const start = moment()
                .subtract(2, "days")
                .format("YYYY-MM-DD");
                const end = moment()
                .subtract(2, "days")
                .format("YYYY-MM-DD");
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "上周同日",
              onClick(picker) {
                const start = moment()
                .subtract(1, "weeks")
                .format("YYYY-MM-DD");
                const end = moment()
                .subtract(1, "weeks")
                .format("YYYY-MM-DD");
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "上月同日",
              onClick(picker) {
                const start = moment()
                .subtract(1, "months")
                .format("YYYY-MM-DD");
                const end = moment()
                .subtract(1, "months")
                .format("YYYY-MM-DD");
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "本周",
              onClick(picker) {
                const weekOfday = moment().format("E"); //计算今天是这周第几天
                const start = moment()
                .subtract(weekOfday - 1, "days")
                .format("YYYY-MM-DD");
                const end = moment().format("YYYY-MM-DD");
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "上一周",
              onClick(picker) {
                const start = moment()
                .week(moment().week() - 1)
                .startOf("week")
                .subtract(-1, "days")
                .format("YYYY-MM-DD");
                const end = moment()
                .week(moment().week() - 1)
                .endOf("week")
                .subtract(-1, "days")
                .format("YYYY-MM-DD");
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "本月",
              onClick(picker) {
                const start = moment().month(moment().month()).startOf("month").format("YYYY-MM-DD");
                const end = moment().format("YYYY-MM-DD");
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "上一月",
              onClick(picker) {
                const start = moment()
                .month(moment().month() - 1)
                .startOf("month")
                .format("YYYY-MM-DD");
                const end = moment()
                .month(moment().month() - 1)
                .endOf("month")
                .format("YYYY-MM-DD");
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "本年度",
              onClick(picker) {
                const start = moment()
                .year(moment().year())
                .startOf("year")
                .format("YYYY-MM-DD");
                const end = moment().format("YYYY-MM-DD");
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "上一年",
              onClick(picker) {
                const start = moment()
                .year(moment().year() - 1)
                .startOf("year")
                .format("YYYY-MM-DD");
                const end = moment()
                .year(moment().year() - 1)
                .endOf("year")
                .format("YYYY-MM-DD");
                picker.$emit("pick", [start, end]);
              }
            },
          ],
        },
        //正常日期控件快捷选择方式
        dayShortcuts:[],
        sitedown: false,      //位置多选下拉
        selectdown: false,    //位置单选
        sum_or_part: "sum",       //显示 默认合计
        company_id_arr:[],   //所属企业选中id
        company_id:'',  //所属企业选中id
        options:[],         //级联控件 所属企业
        Case:[],     //案场列表
        submitCase: '',   //案场选中参数
        caseLimint:20,//案场多选最大值

        showType:'time',   //显示类型
        isAll:false,//是否全选
      };
    },
    components: {
      Cascader
    },
    created() {},
    mounted() {
      this.getReady();
      this.$Bus.$on("mallChange", data => {
        this.$Bus.$emit('Loading',true);
        this.company_id = data.slice(-1)[0];
        this.caseLimint = 20;
        let url='/sys/report_assist/case_list?company_id='+this.company_id;
        this.getCaseApi(url);
      });
      this.$Bus.$on("showTime",val=>{
        if (val == 'distr') {
          this.sum_or_part = 'part';
        }
      })
    },
    beforeDestroy(){
      this.$Bus.$off('mallChange');
      this.$Bus.$off('showTime');
    },
    methods: {
      //页面初始化,获取企业信息，拿到第一个企业调用获取案场
      getReady(){
        let url = '/sys/report_assist/company_tree';
        this.$api.get(url)
        .then(data => {
          if(data){
            recursion(data.data);
            function recursion(val) {
              if(val.length){
                for(let i in val){
                  val[i].value = val[i].id;
                  val[i].label = val[i].company_name;
                  val[i].parent_id_str = val[i].parent_name_list ? val[i].parent_name_list.join('/') : '';
                  if(val[i].children && val[i].children.length){
                    recursion(val[i].children)
                  }else{
                    delete val[i].children
                  }
                }
              }
            }
            this.options = data.data;
            this.company_id = data.data[0].id
            this.company_id_arr.push(data.data[0].id)

            let url2='/sys/report_assist/case_list?company_id='+ data.data[0].id;
            this.getCaseApi(url2);
          }
        })
        .catch(err=>{
          console.log(err,'企业');
          this.options = [];
        })
      },
      //get案场列表api
      getCaseApi(url){
        this.$api.get(url)
        .then(data=>{
          this.Case = [];
          if(data){
            this.Case = data.data;
            this.Case.unshift({case_name:'全部',id:'all'})
            this.submitCase = []
            this.submitCase.push(data.data[1].id)
            this.Updata()
          }
          this.$Bus.$emit('Loading',false);
        })
        .catch(err=>{
           console.log(err)
          this.Case = []
          this.submitCase = null;
          this.$Bus.$emit('Loading',false);
        })
      },

      //条件改变
      Updata(isTimeChange = true,){
        this.$Bus.$emit('Loading', true);
        let comp_name='';
        for(let i=0;i<this.options.length;i++) {
          if(this.options[i].id==this.company_id) {
            comp_name = this.options[i].label;
            break;
          }
        }

        let submitdata={};
        submitdata.comp_name=comp_name;
        submitdata.company_id=this.company_id;
        submitdata.start_day=this.datetimeval.day[0];
        submitdata.end_day=this.datetimeval.day[1];
        submitdata.case_id_list = this.submitCase

        this.$Bus.$emit('UpCondition',submitdata,this.isAll);      //条件改变
      },

      CaseChange(val){
        if(val.includes('all')){
          this.submitCase = ['all'];
          this.isAll = true
          this.caseLimint = 1
        }else{
          this.caseLimint = 0
          this.isAll = false
        }
      },
      //案场选择改变
      CaseVisibleChange(val){
        if(!val) {
          if (!this.submitCase || !this.submitCase.length) {
            this.$message.error('请选择至少一个位置！');
            this.submitCase = Array.of(this.Case[1].id);
            this.Updata();
            return
          }else{
            this.Updata();
            // this.$Bus.$emit('Remove');
            return
          }
        }
      },
      //日期change事件
      dayChange(val){
        this.Updata(false)
      },

      //刷新
      reload(){
        this.Updata(false);
      },
      //点击案场级联删除事件
      CaseClick(){
        if(this.submitCase.length==0) {
          this.$message.error('请至少选择一个案场');
          this.submitCase.push(this.Case[1].id);
        }
        this.Updata();
      },
    },
    watch: {

    }
  };

</script>
